<template>
  <div :style="newBarStyle"
       class="nav-bar-wrap"
       v-if="show">
    <status-bar></status-bar>
    <div class="nav-bar"
         :style="{'height': navBarHeight}">
      <div class="left"
           @click="leftButtonClicked"
           aria-label="返回"
           :accessible="true">
        <slot name="left">
          <image :src="leftButton"
                 v-if="leftButton && !leftText"
                 class="left-button"></image>
          <text v-if="leftText"
                class="icon-text"
                :style="{ color: textColor }">{{leftText}}</text>
        </slot>
      </div>
      <slot name="middle">
        <text class="middle-title"
              :style="{ color: textColor }">{{title}}</text>
      </slot>
      <div class="right"
           @click="rightButtonClicked">
        <slot name="right">
          <image v-if="rightButton && !rightText"
                 class="right-button"
                 :src="rightButton"
                 :aria-hidden="true"></image>
          <text v-if="rightText"
                class="icon-text"
                :style="{ color: textColor }">{{rightText}}</text>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
import statusBar from './status-bar.vue'
const navigator = weex.requireModule('navigator')
export default {
  components: {
    statusBar
  },
  props: {
    backgroundColor: {
      type: String,
      default: '#42bd56'
    },
    leftButton: {
      type: String,
      default: 'bmlocal://assets/icon_backnav.png'
    },
    textColor: {
      type: String,
      default: '#ffffff'
    },
    rightButton: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '标题'
    },
    leftText: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    },
    useDefaultReturn: {
      type: Boolean,
      default: true
    },
    show: {
      type: Boolean,
      default: true
    },
    barStyle: {
      type: Object
    },
    statusBar: {
      type: [Boolean, String],
      default: true
    }
  },
  computed: {
    newBarStyle() {
      const { backgroundColor, barStyle } = this
      return {
        backgroundColor,
        ...barStyle
      }
    }
  },
  data() {
    return {
      navBarHeight: Math.max((weex.config.eros.navBarHeight || 115) - 35, 80)
    }
  },
  methods: {
    leftButtonClicked() {
      if (this.useDefaultReturn) {
        navigator.pop({}, e => { })
      }
      this.$emit('leftClick', {})
    },
    rightButtonClicked() {
      const hasRightContent = this.rightText || this.rightButton || (this.$slots && this.$slots.right)
      hasRightContent && this.$emit('rightClick', {})
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../css/variables.scss";

.nav-bar-wrap {
  // background-color: $primary;
  background-image: linear-gradient(
    to top left,
    $primary,
    darken($primary, 10%)
  );
}
.nav-bar {
  width: 750px;
  height: 90px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  // background-color: $primary;
  color: #fff;
}
.left {
  width: 180px;
  padding-left: 32px;
}
.middle-title {
  font-size: 32px;
  color: #ffffff;
  height: 36px;
  line-height: 36px;
}
.right {
  width: 180px;
  padding-right: 32px;
  align-items: flex-end;
}
.left-button {
  width: 21px;
  height: 36px;
}
.right-button {
  width: 32px;
  height: 32px;
}
.icon-text {
  font-size: 28px;
  color: #ffffff;
}
</style>